<template>
  <div class="project-main">
    <div class="content">
      <div class="header">
        <span class="title"
          >项目{{ type == "info" ? "信息" : "化" }}台账内容{{
            status == "edit" ? "编辑" : "查看"
          }}</span
        >
        <span class="back" @click="$router.go(-1)">返回</span>
      </div>
      <div class="tips">
        <span>填报单位：{{ infoForm.file_unit || projectForm.file_unit }}</span>
        <span
          >负责人：{{ infoForm.file_people || projectForm.file_people }}</span
        >
        <span>填报时间：{{ infoForm.file_time || projectForm.file_time }}</span>
      </div>
      <div class="title-info">
        项目信息
      </div>
      <el-form
        ref="IForm"
        :model="infoForm"
        label-position="top"
        :rules="rules"
        v-if="type == 'info'"
      >
        <div class="flex-form p-10">
          <el-form-item label="项目名称：" prop="project_name">
            <el-input
              type="text"
              v-model="infoForm.project_name"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="项目经理：">
            <!-- prop="class_project_manager"-->
            <!-- <el-input
              type="text"
              v-model="infoForm.class_project_manager"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input> -->
            <el-tooltip
              class="item"
              effect="light"
              :disabled="status != 'look'"
              :content="
                infoForm.class_project_manager
                  ? infoForm.class_project_manager.join(' / ')
                  : ''
              "
              placement="top-start"
            >
              <el-cascader
                v-model="infoForm.class_project_manager"
                :options="options_organization"
                :props="{
                  value: 'value',
                  label: 'label',
                }"
                placeholder="请选择"
                :disabled="status == 'look'"
                clearable
              ></el-cascader>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="项目执行人：" prop="project_executor">
            <!-- <el-input
              type="text"
              v-model="infoForm.project_executor"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input> -->
            <el-tooltip
              class="item"
              effect="light"
              :disabled="status != 'look'"
              :content="
                infoForm.project_executor
                  ? infoForm.project_executor.join(' / ')
                  : ''
              "
              placement="top-start"
            >
              <el-cascader
                v-model="infoForm.project_executor"
                :options="options_organization"
                :props="{
                  value: 'value',
                  label: 'label',
                }"
                placeholder="请选择"
                :disabled="status == 'look'"
                clearable
              ></el-cascader>
            </el-tooltip>
          </el-form-item>
        </div>
        <div class="flex-form p-10">
          <el-form-item label="投资主体：" prop="invest_company">
            <el-input
              type="text"
              v-model="infoForm.invest_company"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="协议投资额（亿元）：" prop="investment_volume">
            <el-input
              type="text"
              v-model="infoForm.investment_volume"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="项目规模（亩）：" prop="project_scale">
            <el-input
              type="text"
              v-model="infoForm.project_scale"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex-form p-10">
          <el-form-item label="投资人姓名：" prop="class_investor_name">
            <el-input
              type="text"
              v-model="infoForm.class_investor_name"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="投资人联系方式：" prop="class_investor_mobile">
            <el-input
              type="text"
              v-model="infoForm.class_investor_mobile"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="项目来源：" prop="project_source">
            <el-input
              type="text"
              v-model="infoForm.project_source"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex-form">
          <el-form-item label="所属行业：" prop="industry">
            <el-select
              v-model="infoForm.industry"
              placeholder="请选择"
              :disabled="status == 'look'"
              clearable
            >
              <el-option
                v-for="item in options_industry"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目归属区域：" prop="district">
            <el-cascader
              v-model="infoForm.district"
              :options="options_map"
              :props="{}"
              :disabled="status == 'look'"
              clearable
            ></el-cascader>
            <!--    @change="handleChange" -->
          </el-form-item>
          <el-form-item label="项目内容：">
            <el-input
              type="textarea"
              v-model="infoForm.project_content"
              placeholder="请输入"
              :disabled="status == 'look'"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex-form">
          <el-form-item label="论证意见：">
            <el-input
              type="textarea"
              v-model="infoForm.argument_opinion"
              placeholder="请输入"
              :disabled="status == 'look'"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目诉求：">
            <el-input
              type="textarea"
              v-model="infoForm.project_appeal"
              placeholder="请输入"
              :disabled="status == 'look'"
            ></el-input>
          </el-form-item>
          <el-form-item label="存在问题及需要解决事项：">
            <el-input
              type="textarea"
              v-model="infoForm.project_problem"
              placeholder="请输入"
              :disabled="status == 'look'"
            ></el-input>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button v-if="status == 'edit'" @click="save">保 存</el-button>
          <el-button v-if="status == 'look'" @click="$router.go(-1)"
            >关 闭</el-button
          >
        </el-form-item>
      </el-form>
      <el-form
        ref="PForm"
        :model="projectForm"
        label-position="top"
        :rules="rules"
        v-if="type == 'project'"
      >
        <div class="flex-form p-10">
          <el-form-item label="项目名称：" prop="project_name">
            <el-input
              type="text"
              v-model="projectForm.project_name"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="项目经理：">
            <!-- prop="class_project_manager"-->
            <!-- <el-input
              type="text"
              v-model="projectForm.class_project_manager"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input> -->
            <el-tooltip
              class="item"
              effect="light"
              :disabled="status != 'look'"
              :content="
                projectForm.class_project_manager
                  ? projectForm.class_project_manager.join(' / ')
                  : ''
              "
              placement="top-start"
            >
              <el-cascader
                v-model="projectForm.class_project_manager"
                :options="options_organization"
                :props="{}"
                placeholder="请选择"
                :disabled="status == 'look'"
                clearable
              ></el-cascader
            ></el-tooltip>
          </el-form-item>
          <el-form-item label="项目执行人：" prop="project_executor">
            <!-- <el-input
              type="text"
              v-model="projectForm.project_executor"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input> -->
            <el-tooltip
              class="item"
              effect="light"
              :disabled="status != 'look'"
              :content="
                projectForm.project_executor
                  ? projectForm.project_executor.join(' / ')
                  : ''
              "
              placement="top-start"
            >
              <el-cascader
                v-model="projectForm.project_executor"
                :options="options_organization"
                :props="{}"
                placeholder="请选择"
                :disabled="status == 'look'"
                clearable
              ></el-cascader
            ></el-tooltip>
          </el-form-item>
        </div>
        <div class="flex-form p-10">
          <el-form-item label="完成时限：" prop="time_limit">
            <el-date-picker
              v-model="projectForm.time_limit"
              type="date"
              placeholder="请选择完成时限"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :disabled="status == 'look'"
              clearable
            >
            </el-date-picker>
            <!-- 
              format="yyyy[年]M[月]"
              value-format="yyyy[年]M[月]"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              -->
          </el-form-item>
          <el-form-item label="项目单位：" prop="project_unit">
            <el-input
              type="text"
              v-model="projectForm.project_unit"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="涉及县区（部门）：" prop="related_district">
            <el-input
              type="text"
              v-model="projectForm.related_district"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex-form p-10">
          <el-form-item label="项目来源：" prop="project_source">
            <el-input
              type="text"
              v-model="projectForm.project_source"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="级别：" prop="project_level">
            <el-input
              type="text"
              v-model="projectForm.project_level"
              placeholder="请输入"
              :disabled="true"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="建设类型：" prop="construction_type">
            <el-input
              type="text"
              v-model="projectForm.construction_type"
              placeholder="请输入"
              :disabled="status == 'look'"
              clearable
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex-form">
          <el-form-item label="项目目标：">
            <el-input
              type="textarea"
              v-model="projectForm.work_target"
              placeholder="请输入"
              :disabled="status == 'look'"
            ></el-input>
          </el-form-item>
          <el-form-item label="配合单位总体目标：">
            <el-input
              type="textarea"
              v-model="projectForm.peihe_unit_target1"
              placeholder="请输入"
              :disabled="status == 'look'"
            ></el-input>
          </el-form-item>
          <el-form-item label="配合单位分项目标：">
            <el-input
              type="textarea"
              v-model="projectForm.peihe_unit_target2"
              placeholder="请输入"
              :disabled="status == 'look'"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex-form w-960">
          <el-form-item label="配合单位完成时限：">
            <el-input
              type="textarea"
              v-model="projectForm.peihe_unit_time_limit"
              placeholder="请输入"
              :disabled="status == 'look'"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input
              type="textarea"
              v-model="projectForm.remark"
              placeholder="请输入"
              :disabled="status == 'look'"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button v-if="status == 'edit'" @click="save">保 存</el-button>
          <el-button v-if="status == 'look'" @click="$router.go(-1)"
            >关 闭</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  CheckProjectDetail,
  Project1Edit,
  Project2Edit,
  RoleDownBox,
} from "@/api/project/detail";
import MapData from "@/utils/mapData.json";
export default {
  data() {
    return {
      id: "",
      type: "",
      status: "",
      infoForm: {},
      projectForm: { time_limit: "" },

      options_industry: [
        { label: "高端装备制造", value: "高端装备制造" },
        { label: "新材料合成加工", value: "新材料合成加工" },
        { label: "新一代信息技术", value: "新一代信息技术" },
        { label: "绿色能源", value: "绿色能源" },
        { label: "现代服务业", value: "现代服务业" },
        { label: "生态文旅休闲", value: "生态文旅休闲" },
        { label: "现代都市农业", value: "现代都市农业" },
        { label: "基础设施和社会民生", value: "基础设施和社会民生" },
        { label: "其它", value: "其它" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      options_organization: [],
      options_map: MapData,
      rules: {
        project_name: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        class_project_manager: [
          { required: true, message: "请选择项目经理", trigger: "change" },
        ],

        project_executor: [
          { required: true, message: "请选择项目执行人", trigger: "change" },
        ],
        invest_company: [
          { required: true, message: "请输入投资主体", trigger: "blur" },
        ],
        investment_volume: [
          { required: true, message: "请输入协议投资额", trigger: "blur" },
        ],
        project_scale: [
          { required: true, message: "请输入项目规模", trigger: "blur" },
        ],
        class_investor_name: [
          { required: true, message: "请输入投资人姓名", trigger: "blur" },
        ],

        class_investor_mobile: [
          { required: true, message: "请输入投资人联系方式", trigger: "blur" },
        ],
        project_source: [
          { required: true, message: "请输入项目来源", trigger: "blur" },
        ],
        industry: [
          { required: true, message: "请选择所属行业", trigger: "change" },
        ],

        district: [
          { required: true, message: "请输入项目归属区域", trigger: "blur" },
        ],

        project_unit: [
          { required: true, message: "请输入项目单位", trigger: "blur" },
        ],
        related_district: [
          {
            required: true,
            message: "请输入涉及县区（部门）",
            trigger: "blur",
          },
        ],
        project_level: [
          { required: true, message: "请输入级别", trigger: "blur" },
        ],
        construction_type: [
          { required: true, message: "请输入建设类型", trigger: "blur" },
        ],
        time_limit: [
          {
            required: true,
            message: "请选择完成时限",
            trigger: "change",
          },
        ],
      },
      token: "",
    };
  },

  mounted() {
    this.token = localStorage.getItem("login");
    let { type, id, status } = { ...this.$route.params };
    this.id = id;
    this.type = type;
    this.status = status;
    this.getDetailInfo();
    this.RoleDownBox();
    // if (type == "info") {
    //   this.getRegion();
    // }
  },
  methods: {
    // async getRegion() {
    //   let res = await getRegion();
    //   this.options_map = res;
    // },
    async RoleDownBox() {
      // 四级下拉框
      let res = await RoleDownBox();
      this.options_organization = res;
      console.log(res);
      //  file_audit_people_id
    },
    async getDetailInfo() {
      let res = await CheckProjectDetail({
        project_type: this.type == "info" ? 1 : 2,
        project_id: this.id,
      });

      if (res.code && res.code != 0) {
      } else {
        if (this.type == "info") {
          console.log(res.data[0].class_project_manager);
          console.log(res.data[0].project_executor);
          this.infoForm = {
            ...res.data[0],
            class_project_manager:
              res.data[0].class_project_manager == null
                ? ""
                : res.data[0].class_project_manager.split("/"),
            project_executor:
              res.data[0].project_executor == null
                ? ""
                : res.data[0].project_executor.split("/"),
            district:
              res.data[0].district == "全国" ||
              res.data[0].district == null ||
              res.data[0].district == undefined
                ? [""]
                : res.data[0].district.split("；") || [],
          };
        } else {
          this.projectForm = {
            ...res.data[0],
            class_project_manager:
              res.data[0].class_project_manager == null
                ? ""
                : res.data[0].class_project_manager.split("/"),
            project_executor:
              res.data[0].project_executor == null
                ? ""
                : res.data[0].project_executor.split("/"),
          };
        }
      }
    },
    async save() {
      let that = this;
      if (this.type == "info") {
        this.$refs.IForm.validate(async (valid) => {
          if (valid) {
            console.log(that.infoForm);
            let value1 = [...that.infoForm.class_project_manager];
            let value2 = [...that.infoForm.project_executor];
            let id1 =
              value1.length > 0 ? value1[value1.length - 1].split("-")[1] : "";
            let id2 =
              value2.length > 0 ? value2[value2.length - 1].split("-")[1] : "";
            if (id2 == undefined || id2 == "") {
              this.$message.warning("请选择执行人,请具体到人员");
              return;
            }
            let res = await Project1Edit({
              ...that.infoForm,
              token: this.token,
              district:
                (that.infoForm.district[0] == ""
                  ? "全国"
                  : that.infoForm.district[0]) +
                (that.infoForm.district[1]
                  ? "；" + that.infoForm.district[1]
                  : ""),
              class_project_manager: value1.length > 0 ? value1.join("/") : "",
              project_executor: value2.join("/"),
              class_project_manager_id: id1,
              project_executor_id: id2,
            });
            console.log(res);
            if (res.code == 0) {
              that.$message.success(res.msg);
              that.$router.go(-1);
            } else {
              that.$message.error(res.msg);
            }
          } else {
            that.$message.warning("请填写必填项！");
            return false;
          }
        });
      } else if (this.type == "project") {
        this.$refs.PForm.validate(async (valid) => {
          if (valid) {
            let value1 = [...that.projectForm.class_project_manager];
            let value2 = [...that.projectForm.project_executor];
            let id1 =
              value1.length > 0 ? value1[value1.length - 1].split("-")[1] : "";
            let id2 =
              value2.length > 0 ? value2[value2.length - 1].split("-")[1] : "";
            if (id2 == undefined || id2 == "") {
              this.$message.warning("请选择执行人,请具体到人员");
              return;
            }
            let res = await Project2Edit({
              ...that.projectForm,
              token: this.token,
              class_project_manager: value1.length > 0 ? value1.join("/") : "",
              project_executor: value2.join("/"),
              class_project_manager_id: id1,
              project_executor_id: id2,
            });
            if (res.code == 0) {
              that.$message.success(res.msg);
              that.$router.go(-1);
            } else {
              that.$message.error(res.msg);
            }
          } else {
            that.$message.warning("请填写必填项！");
            return false;
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.project-main {
  background: #fafafa;
  height: 100%;
  overflow: hidden;
  text-align: left;
}
.content {
  padding: 0 30px;
  margin: 0 auto;
  width: 1500px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(189, 189, 189, 0.6);
  overflow: hidden;
}
.header {
  position: relative;
  height: 60px;
  line-height: 60px;
  border-bottom: 4px solid rgba(204, 204, 204, 0.35);
  span.title {
    display: inline-block;
    height: 60px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
    cursor: default;
  }
  span.back {
    position: absolute;
    right: 0;
    top: 9px;
    width: 100px;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    background: #5889dc;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
}
.tips {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 70px;
  span {
    margin: 0 118px 0 0;
  }
}
.title-info {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
/deep/ .el-form {
  padding-top: 10px;
}
/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  line-height: 36px;
  opacity: 0.8;
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
/deep/ .el-input__inner {
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(204, 204, 204, 0.85);
  border-radius: 5px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.flex-form {
  display: flex;
  justify-content: space-between;
  /deep/ .el-form-item {
    flex: 0 0 420px;
  }
  /deep/ .el-textarea__inner {
    height: 110px;
  }
}
/deep/ .el-textarea__inner {
  resize: none;
  height: 90px;
  border: 1px solid rgba(204, 204, 204, 0.85);
}

/deep/ .el-button {
  display: block;
  margin: 40px auto 0;
  padding: 0;
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: #446db3;
  border-radius: 8px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}
.w-960 {
  width: 930px;
}
/deep/.el-select,
/deep/.el-cascader,
/deep/ .el-date-editor.el-input {
  width: 100%;
}
/deep/.p-10 .el-form-item__content {
  margin-bottom: 10px;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .content {
    transform: scale(0.96);
    transform-origin: 0 0;
    height: 1100px;
    margin-left: 120px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .content {
    transform: scale(0.88);
    transform-origin: 0 0;
    height: 1100px;
    margin-left: 104px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .content {
    transform: scale(0.94);
    transform-origin: 0 0;
    height: 1100px;
    margin-left: 16px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .content {
    transform: scale(0.88);
    transform-origin: 0 0;
    height: 1100px;
    margin-left: 24px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .content {
    transform: scale(0.78);
    transform-origin: 0 0;
    height: 998px;
    margin-left: 4px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .content {
    transform: scale(0.66);
    -moz-transform: scale(0.66);
    -webkit-transform: scale(0.66);
    -o-transform: scale(0.66);
    transform-origin: 0 0;
    height: 998px;
    margin-left: 16px;
  }
}
</style>
